<template>
	<div class="context">
		<van-tabs v-model="active">
		  <van-tab title="推荐">
			  <Recommend></Recommend>
		  </van-tab>
		  <van-tab title="热门">
			  <Hot></Hot>
		  </van-tab>
		  <van-tab title="最新">
			  <Recommend></Recommend>
		  </van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import Recommend from 'com/recommend.vue'
	import Hot from 'com/hot.vue'
	export default{
		  data() {
		    return {
		      active: 0,
		    };
		  },
		  components:{
			  Recommend,Hot
		  }
	}
</script>

<style lang="scss">
	.context{
		width: 100%;
		// height: 500rem;
		margin-top: 3.5rem;
		padding-bottom: 0.03rem;
		.van-tab{
			// width: 0.3rem;
			flex-grow: 0;
			display: flex;
			box-sizing:content-box;
			margin-right:0.15rem;
		}
		.van-tab__text--ellipsis{
			display: block;
			width: 0.5rem;
			
		}
		.van-tab--active{
			color:#1687de;
		}
		.van-tabs__line{
			background-color: #1687de;
			width: 0.2rem;
		}
		.van-tabs__wrap{
			border-bottom: 0.02rem solid gainsboro;
		}
	}
	
</style>
